<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>KidsTube</title>
	<link rel="stylesheet" href="framework/jquery.mobile-1.0rc3.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="framework/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="js/page_event.js"></script>
	<script type="text/javascript" src="framework/jquery.mobile-1.0rc3.min.js"></script>
	<script type="text/javascript" src="js/localstorage.js"></script>
	<script type="text/javascript" src="js/spin.js"></script>
	<script language="javascript">
	<!--
		var page = 0;
		var total = 0;
		var json_url = "";
		var $list;
		
		var fav_list;
		
		function Init()
		{			
			json_url = "http://gdata.youtube.com/feeds/api/users/snkidstube/favorites?v=2&alt=jsonc&max-results=50&start-index=1";
			
			fav_list = getData(json_url);
	        total = fav_list.data.items.length;
	        LinkList(2, 1);
		}

		$(window).scroll(function()
		{
			// Android more
			if($(window).scrollTop() == $(document).height() - $(window).height())
			{
				if(page > 0 && page < total)
				{
					$("#load").show();
					More();
				}
			}	
		});
		
		function LinkList(type, idx)
		{
			for(i=0; i<3; i++)
			{
				if(i == idx)
					$('a')[i].setAttribute('id','btn_up');
				else
					$('a')[i].setAttribute('id','');
			}
			
			$("#list").empty();
			
			page = 0;
			
			if(type == 1)
			{
				fav_list.data.items.sort(function(a, b)
				{
					return (a.video.uploaded > b.video.uploaded) ? -1 : (a.video.uploaded < b.video.uploaded) ? 1 : 0;	
				});
			}
			else if(type == 2)
			{
				fav_list.data.items.sort(function(a, b)
				{
					return (parseInt(a.video.likeCount) > parseInt(b.video.likeCount)) ? -1 : (parseInt(a.video.likeCount) < parseInt(b.video.likeCount)) ? 1 : 0;	
				});
			}
			else if(type == 3)
			{
				fav_list.data.items.sort(function(a, b)
				{
					return (parseInt(a.video.viewCount) > parseInt(b.video.viewCount)) ? -1 : (parseInt(a.video.viewCount) < parseInt(b.video.viewCount)) ? 1 : 0;	
				});
			}
			
			$("#loading").show();		
			$("#load").show();

			More();
		}

		function More()
		{
			var response = "";

			$list = $("#list");

			if(page < total)
			{
				var item;
				var max = page + 10;
				var dnclass = "";
				
				for(var i=page; i<max; i++)
				{
					if(total<=i)
						break;
					
					if(i < 3)
						dnclass = "down on";
					else
						dnclass = "down";
						
					item = fav_list.data.items[i];
					
					response += '<li style="background:url(images/noimg.png) no-repeat">';
					response += '<a href="http://www.youtube.com/watch?v=' + item.video.id + '">';
					response += '<div class="img_box">';
					response += '<img src="' + item.video.thumbnail.sqDefault + '" width="80" height="60"/>';
					response += '<span class="length">' + time(item.video.duration) + '</span>';
					response += '</div>';
					response += '<h3>' + item.video.title + '</h3>';
					response += '<p style="font-weight:normal">';
					response += '<span class="veiw"> ' + formatCurrency(item.video.viewCount) + "</span>";
					response += '<span class="like"> ' + formatCurrency(item.video.likeCount) + "</span>";
					response += '<span class="reply"> ' + formatCurrency(item.video.commentCount) + "</span>";
					response += '</p>';
					response += '</a>';
					response += '<a href="#" onclick="javascript:Download(this);" id="' + item.video.id + '" class="' + dnclass + '">down</a>';
					response += '</li>';			
				}		
	        }
								
			if(response == "")
				$("#loading").hide();
			else
				$(response).appendTo($list);
					
			Downloads();	
			$("#load").hide();	
				
			page += 10;
				
			if(page >= total)
				$("#loading").hide();
		}


		function Download(obj)
		{
			var classnm = obj.className;
			//var arrdn = localDatabase('get', 'down_kidstube');

			if(classnm.indexOf("down on") != -1)
			{
				window.location.href = "http://kidstube.kr/play.php?v=" + obj.id;
			}
			else
			{
				/*
				if(arrdn)
					arrdn.push(obj.id);
				else
					arrdn = [obj.id];
				
				localDatabase('set', 'down_kidstube', arrdn);
				obj.className = "down on";
				*/
				window.location.href = "http://golrazo.com/free/down.php?v=" + obj.id;
			}
		}
		
		// Download checked
		function Downloads()
		{
			/*
			var arrdn = localDatabase('get', 'down_kidstube');

			if(arrdn)
			{
				for(i=0; i<arrdn.length; i++)
				{
					$("#" + arrdn[i]).addClass("down on");
				}
			}
			*/
		}
	-->
	</script>
</head>
<body>
	<div data-role="page" id="home">
		<div class="lnb">
			<div class="tab_area" id="top_menu">
				<a href="javascript:LinkList(1, 0);" class="btn_tab left" style="font-size:14px">New</a>
				<a href="javascript:LinkList(2, 1);" class="btn_tab" id="btn_up" style="font-size:14px">Featured</a>
				<a href="javascript:LinkList(3, 2);" class="btn_tab right" style="font-size:14px">Best</a>
			</div>				
		</div>
		<div class="content" data-role="content">
			<ul class="ul_list" id="list">
			</ul>
			<div id="loading">
				<div id="load" style="display:none;"></div>
			</div>
		</div>
	</div>
<script>
	var opts = {
	  lines: 8, // The number of lines to draw
	  length: 4, // The length of each line
	  width: 3, // The line thickness
	  radius: 6, // The radius of the inner circle
	  color: '#000', // #rgb or #rrggbb
	  speed: 1, // Rounds per second
	  trail: 54, // Afterglow percentage
	  shadow: false // Whether to render a shadow
	};
	var target = document.getElementById('load');
	var spinner = new Spinner(opts).spin(target);
</script>
</body>
</html>
